<template>
	<view>
		<!-- 顶部状态栏 -->
		<view class="status_bar">
			<view class="content">
				<view class="title">蜗牛菜谱大全</view>
				<view class="des">小白学做菜必备烹饪助手</view>
			</view>
		</view>
		<!-- 状态栏以下内容 -->
		<!-- 搜索框 -->
		<u-search class="search" @search="search" v-model="searchData" border-color="#efefef" shape="round"
			:show-action="false" :animation="false" height="74" bg-color="#fff">
		</u-search>
		<!-- 轮播图 -->
		<banner></banner>
		<!-- 首页分类 -->
		<homeCategory></homeCategory>
		<!-- 首页楼层 -->
		<floor></floor>
		<!-- 推荐 -->
		<recommend></recommend>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchData: '',
				scrollTop: 0,
			}
		},
		methods: {
			getUserInfo() {
				uni.getStorage({
					key: 'token',
					success: async ({
						data
					}) => {
						const result = await this.$api.profile.getUserInfo(data);
						console.log(result[0]);
						getApp().globalData.userInfo = result[0];
					}
				});
			},
			search() {
				uni.navigateTo({
					url: `/pages/cookSearch/cookSearch?target=${this.searchData}`
				})
			}
		},
		onLoad() {
			this.getUserInfo();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style lang="scss">
	.status_bar {
		height: 220rpx;
		background: #DA7B36;

		.content {
			position: absolute;
			top: 60rpx;
			left: 32rpx;
			color: #FFFFFF;

			.title {
				font-size: 40rpx;
				margin-bottom: 4rpx;
			}
		}
	}

	.search {
		width: 686rpx;
		position: absolute;
		top: 184rpx;
		left: 32rpx;
	}



	/* #9C9C9C #DA7B36 */
</style>
